<template>
	<view class="page">
       <!-- <template v-if="userInfo.is_realname"> -->
	   <template>
            <view class="card card--full form__list">
				<view class="form__cell">
                    <view class="form__label"><text class="form__wran">*</text>船舶名称</view>
                    <view> <input class="uni-input common-right" v-model="dataa.cbbh" placeholder="请输入船舶名称" /></view>
                </view>
				<view class="form__cell">
			        <view class="form__label"><text class="form__wran">*</text>MMSI</view>
			        <view> <input class="uni-input common-right" v-model="dataa.mmsi" placeholder="请输入MMSI" /></view>
			    </view>
				<view class="form__cell">
			  		<view class="form__label"><text class="form__wran">*</text>船长（米）</view>
			  		<view><input class="uni-input common-right" type="digit" v-model="dataa.cc" placeholder="请输入船长（米）" /></view>
			  	</view>
				<view class="form__cell">
			  		<view class="form__label"><text class="form__wran">*</text>船宽（米）</view>
			  		<view> <input class="uni-input common-right" type="digit" v-model="dataa.ck" placeholder="请输入船宽（米）" /></view>
			  	</view>
				<view class="form__cell">
					<view class="form__label"><text class="form__wran">*</text>吃水（米）</view>
					<view> <input class="uni-input common-right" type="digit" v-model="dataa.cs" placeholder="请输入吃水（米）" /></view>
				</view>
				<view class="form__cell">
					<view class="form__label"><text class="form__wran">*</text>载重（吨）</view>
					<view> <input class="uni-input common-right" type="digit" v-model="dataa.zz" placeholder="请输入载重（吨）" /></view>
				</view>
				<view class="form__cell">
					<view class="form__label"><text class="form__wran">*</text>船主姓名</view>
					<view> <input class="uni-input common-right"  v-model="dataa.czxm" placeholder="请输入船主姓名" /></view>
				</view>
				<view class="form__cell">
					<view class="form__label"><text class="form__wran">*</text>手机号码</view>
					<view><input class="uni-input common-right" type="number" v-model="dataa.sjhm" placeholder="请输入手机号码" /> </view>
				</view>
				<view class="form__cell">
					<view class="form__label"><text class="form__wran">*</text>QQ</view>
					<view>
						<input class="uni-input common-right" type="number" v-model="dataa.qq" placeholder="请输入QQ" />
					</view>	
				</view>
				<view class="form__cell">
				    <view class="form__label"><text class="form__wran">*</text>船型</view>
				    <view> 
						<picker mode="selector" :value="indexa" :range-key="'pic'" :range="arraya" @change="bindPickerChangea">
							<view class="uni-input common-right" >{{arraya[indexa]}}</view>
						</picker>
					</view>
				</view>
				<view class="form__cell">
					<view class="form__label"><text class="form__wran">*</text>航线类型</view>
					<view> 
						<picker mode="selector" :value="indexb" :range-key="'pic'" :range="arrayb" @change="bindPickerChangeb">
							<view class="uni-input common-right" >{{arrayb[indexb]}}</view>
						</picker>
					</view>
				</view>  
				<view class="form__cell">
					<view class="form__label"><text class="form__wran">*</text>封仓形式</view>
					<view> 
						<picker mode="selector" :value="indexc" :range-key="'pic'" :range="arrayc" @change="bindPickerChangec">
							<view class="uni-input common-right" >{{arrayc[indexc]}}</view>
						</picker>
					</view>
			   </view> 			  
			   <view class="form__cell">
					<view class="form__label"><text class="form__wran">*</text>所在省市</view>
					<view>
						<view  @click="go"  v-bind:id="index"  v-if="isout" style="font-size: 30upx;margin-right: 20upx;">请选择所在省市</view>
						<view  @click="go" v-if="!isout" style="font-size: 30upx;margin-right: 20upx;">{{provinc}}</view>
					</view> 
				</view>	
				<view v-if="isgo">
					<province-picker style="font-size: 30upx;" :isgo.sync="isgo" v-on:greet="_isgo" v-on:sheng="getsheng" v-on:shi="getshi" v-on:provinc="getProvince">
					</province-picker>
				</view>
				<view class="form__cell">
					<view class="form__label"><text class="form__wran">*</text>挂靠公司</view>
					<view> <input class="uni-input common-right" v-model="dataa.gkgs" placeholder="请输入挂靠公司" /></view>
				</view>
				<view class="form__cell">
					<view class="form__label"><text class="form__wran">*</text>公司电话</view>
					<view> <input class="uni-input common-right" v-model="dataa.gsdh" placeholder="请输入公司电话" /></view>
				</view>
				
				<view class="card card--full">
				    <view class="card__head">
				        <view class="card__title">
				            船舶主要项目
				        </view>
				    </view>
				    <view class="card__content idcard">
						<view class="idcard__cell">
				            <view class="idcard__img">
				                <view class="idcard__close" v-if="idcard_img[0].path != ''" @tap="_closeImage(0)">
									<uni-icons type="clear" color="#FF4C4C" size="24"></uni-icons>
								</view>
				                <image class="idcard__picture" @tap="_chooseImage(0)" :class="{'idcard__picture--left': idcard_img[0].orientation != 'up'}" :src="idcard_img[0].path ? idcard_img[0].path : '/static/img/boatregister.png'" mode="aspectFill"></image>
				            </view>
				            <view class="idcard__txt">点击上传</view>
				        </view>
				    </view>
				 </view>
				 <cpimg ref="cpimg" @result="cpimgOk" @err="cpimgErr" />
                  <view class="card__head">
                       <view class="card__title">
                           补充：
                       </view>
                   </view>
				<view class="card__content">
					<textarea class="form__textarea" v-model="dataa.bcsm" placeholder="请输入补充说明"  placeholder-style="color: #999;"  auto-height />
				</view>
           </view>
			<view class="foot">
				<button class="foot__btn" type="primary" @click="sendBtn">提交发布信息</button>
			</view>
			<!-- #ifdef MP -->
			<cover-view v-if="is_mp" class="foot__btn foot__btn--cover"  @click="sendBtn">提交发布信息</cover-view>
			<!-- #endif -->
       </template>
	</view>
</template>
<script>
    import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
    import uniPopup from '@/components/uni-popup/uni-popup.vue';
    import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
    import wlpGlobal from '@/components/wlp-global/wlp-global.vue';
	import adDeharbor from '@/components/ad-deharbor/ad-deharbor.vue'; 
	import provincePicker from '@/components/province-picker/province-picker.vue'; 
	import cpimg from "@/components/cpimg/cpimg.vue"; 
    import { router, toast, check } from '@/common/util.js';
    import { secondboatRegister,seconduploadPic ,secondmyships,postPallet } from '@/service/getData.js';
    import { mapState, mapActions } from 'vuex';
    var globalTemp;
	var photo;
	export default {
        components: {
            uniIcons,
            mpvuePicker,
            uniDrawer,
            uniPopup,
            wlpGlobal,
			adDeharbor,
			provincePicker,
			cpimg
        },
		data() {
			return {
				id: 0,  //0表示新增，非0表示修改
				user: '',  //当前登录用户信息
                height: 0,
                is_chacked: true,
				index: '',
				dataa:{
					"type":"addcbdabyuser",
					"id":"",
					"uid":"",
					"uname":"",
					"cbbh":"",
					"mmsi":"",
					"cc":"",
					"ck":"",
					"cs":"",
					"cxid":"",
					"cx":"",
					"hxlxid":"",
					"hxlx":"",
					"fcxsid":"",
					"fcxs":"",
					"zz":"",
					"cqhc":"0",
					"czxm":"",
					"sjhm":"",
					"qq":"",
					"sheng":"",
					"shi":"",
					"gkgs":"",
					"gsdh":"",
					"bcsm":"",
					"pic":"",
				},
                cargoTypeIndex: [0, 0],
				cargoTypeList: [],
                packingTypeList: [{'label':'请选择'}],
                packingTypeIndex: 0,
				companyArray:[{'name':'请选择'}],
				companyIndex:0,
                drawerVisible: false,
                is_departure: false,
                is_target: false,
				indexa:0,//船舶类型的选择
				indexb:0,//航运类型的选择
				indexc:0,//封仓形式的选择
				arraya:['请选择船舶类型','散货船', '集装箱船','运沙船','罐装船','拖队','油船','化学品船','液化气船','滚装船','化工船','捕捞船','游艇','海船','驳船','工程船','报废船',"其他特殊船"],
				arrayb:['请选择航运类型','长江-内河','江海联运','海运'],
				arrayc:['请选择封仓形式','无封仓','简易封仓','自动封仓'],
				is_popupShow: false,  //是否显示单选按钮
				radiovalue: '', //0是相机 1是文件
				isgo:false,
				isout:true,
				provinc:'',
				idcard_img: [{
				    path: '',
				    orientation: 'up'
				}],
			};
		},
        computed: {
            ...mapState(['userInfo', 'companyTempData', 'dictionaryTempData']),
            resDefaultIndex() {
                if(this.is_departure){
                    return this.data.departure_index;
                }
                if(this.is_target){
                    return this.data.target_index;
                }
                return [];
            }
        },
        async onLoad(option) {
			console.log(option);
			if(option.id == ''){
				this.dataa.id = 0 ;
			    this.dataa.uid = this.userInfo.uid;
			    this.dataa.uname = this.userInfo.uname;
			    this.dataa.czxm = this.userInfo.realname;
			    this.dataa.qq = this.userInfo.qq;
			    this.dataa.sjhm = this.userInfo.mobile;
			}else{
				console.log(option.id);
				let send = {"type":"cbdalistbyuser","uid":this.userInfo.uid,"key":"","cbid":option.id};
				console.log(JSON.stringify(send) )
				secondmyships({data:send}).then(res =>{
					let result = eval('('+res.data+')');
					console.log(result);
					let resulta = result[0].meslist[0];
					console.log("返回数据："+JSON.stringify(resulta) );
					this.dataa.uid =this.userInfo.uid;
					this.dataa.uname = this.userInfo.uname;
					this.dataa.id = resulta.id;
					this.dataa.cbbh  = resulta.cbbh;
					this.dataa.mmsi = resulta.mmsi;
					this.dataa.cc = resulta.cc;
                    this.dataa.ck = resulta.ck;
					this.dataa.cs = resulta.cs;
					this.dataa.sjhm = resulta.sjhm;
					this.dataa.czxm = resulta.czxm;
					this.dataa.zz = resulta.zz;
					this.dataa.bcsm = resulta.bzxx;
					// this.dataa.pic = resulta.pic;
					this.idcard_img[0].path = resulta.pic;
					this.dataa.cx = resulta.cx;
					this.dataa.hxlx = resulta.hxlx;
					this.dataa.fcxs = resulta.fcxs;
					this.dataa.gsdh = resulta.gsdh;
					this.dataa.gkgs = resulta.gkgs;
					this.dataa.bzxx = resulta.bzxx;
					this.dataa.qq = resulta.qq;
					this.dataa.sheng = resulta.sheng;
					this.dataa.shi = resulta.shi;
					this.provinc = resulta.sheng+resulta.shi;
					this.isout = !this.isout;
					this.indexa = this.checkarry(this.arraya,resulta.cx);
					if(this.indexa <=10){
						this.dataa.cxid = 49 + this.indexa;
					}else{
						this.dataa.cxid = 499 + this.indexa
					}
					this.indexb = this.checkarry(this.arrayb,resulta.hxlx);
					this.dataa.hxlxid = 19 + this.indexb;
					this.indexc = this.checkarry(this.arrayc,resulta.fcxs);
					this.dataa.fcxsid = 39 + this.indexc;
					this.cpimgOk(this.idcard_img[0].path);
				});
			}
            // port由height启动，需放数据加载后
            const systemInfo = uni.getSystemInfoSync();
            this.height = systemInfo.windowHeight;
        },
        methods:{
            ...mapActions(['getReleaseCompany', 'getCargoType', 'getPackingType', 'getGlobal']),
            _goPage(url) {
                router.navigateTo(url);
            },
			checkarry(arry,num){
				var tem ;
				for(var i=0;i<arry.length;i++){
					if(arry[i] == num){
						tem = i;
					}
				}
				return tem;
			},
			//选择图片
			_chooseImage(index) {   
			    let that = this;
			    if(this.idcard_img[index].path == ''){
			        this.$refs.cpimg._changImg(index);
			    }else{
			        // 查看图片
			        uni.previewImage({
			            current: 0,
			            urls: [this.idcard_img[index].path]
			        });
			    }
			},
			//组件cpimg返回的文件结果
			cpimgOk(file) {
				console.log("333333333")
			    this.idcard_img[file.urlType].path = file.data[0];
			    this.getImageInfo(file.urlType);
				console.log(this.idcard_img[file.urlType].path);
				toast.loading('图片上传中，请稍后...');
				seconduploadPic(this.idcard_img[0].path,{"filetype":"1"}).then(res =>{
					console.log(res.data);			
					let pic = eval('('+res.data+')');
					let picture = JSON.parse(pic);
					console.log(picture[0].meslist[0].url);
					this.dataa.pic = picture[0].meslist[0].url;
					toast.hideLoading();
				});
			},
			//cpimg返回的错误原因
			cpimgErr(e) {
			    toast.show(e);
			},
			//用于cpimg返回的正确结果的处理，获取图片信息
			getImageInfo(index) {
			    let that = this;
			    uni.getImageInfo({
			        src: that.idcard_img[index].path,
			        success: function(info) {
			            if(info.width < info.height){
			                that.idcard_img[index].orientation = 'left';
			            }
			        }
			    })
			},
			_closeImage(index) {
			    this.idcard_img[index].path = '';
			    this.idcard_img[index].orientation = 'up';
			},
			
			//用于获得船舶类型
			bindPickerChangea: function(e) {
			            this.indexa = e.target.value;
						this.dataa.cx = this.arraya[this.indexa];
						if(this.indexa <=10){
							this.dataa.cxid = 49 + this.indexa;
						}else{
							this.dataa.cxid = 499 + this.indexa
						}
						
			        },
			//用于获得航运类型
			bindPickerChangeb: function(e) {
					    this.indexb = e.target.value;
						this.dataa.hxlx = this.arrayb[this.indexb];
						this.dataa.hxlxid = 19 + this.indexb;
					},
			//用于获得封仓形式
			bindPickerChangec: function(e) {
			            this.indexc = e.target.value;
						this.dataa.fcxs = this.arrayc[this.indexc];
						this.dataa.fcxsid = 39 + this.indexc;
			        },
			//获得省
			getsheng(sheng){
			this.dataa.sheng = sheng;	
			},
			//获得市
			getshi(shi){
			this.dataa.shi = shi;	
			},			
			go(){
				this.isgo=true;
				console.log("dadfasf");
				this.isout=true;
			},
			_isgo(isgo){
				this.isgo=isgo;
			},
			getProvince(province){
				this.provinc = province;
				this.isout = !this.isout;
			},
            sendBtn() {
				//进行判断				
				if (this.dataa.cbbh== '')
				{
					toast.show('请选择船舶名称');
					return;
				}
				if (this.dataa.mmsi == '')
				{
					toast.show('请输入呼号mmsi');
					return;
				}
				
				if (this.dataa.cc == '')
				{
					toast.show('请输入船长');
					return;
				}
				if (this.dataa.ck == '')
				{
					toast.show('请输入船宽');
					return;
				}
				if (this.dataa.cs == '')
				{
					toast.show('请输入吃水深度');
					return;
				}
				if (this.dataa.zz == '')
				{
					toast.show('请输入载重');
					return;
				}
				if (this.dataa.czxm == '')
				{
					toast.show('请输入船主姓名');
					return;
				}
				if (this.dataa.sjhm == '')
				{
					toast.show('请输入手机号码');
					return;
				}
				if (this.dataa.qq == '')
				{
					toast.show('请输入联系qq');
					return;
				}
				if (this.dataa.cx == '' || this.dataa.cx == '请选择船舶类型')
				{
					toast.show('请选择船舶类型');
					return;
				}
				if (this.dataa.hxlx == '' || this.dataa.hxlx == '请选择航运类型')
				{
					toast.show('请选择航运类型');
					return;
				}
				if (this.dataa.fcxs == '' || this.dataa.fcxs == '请选择封仓形式')
				{
					toast.show('请选择封仓形式');
					return;
				}
				if (this.dataa.sheng == '' || this.dataa.shi == '')
				{
					toast.show('请选择所在省市');
					return;
				}
				if (this.dataa.gkgs == '')
				{
					toast.show('请输入挂靠公司');
					return;
				}
				if (this.dataa.gsdh == '')
				{
					toast.show('请输入公司电话');
					return;
				}
				var that = this;
				if(this.idcard_img[0].path == '' && this.dataa.id == 0){
					toast.show('请上传船舶项目图片');
					return;
				};
				console.log(this.dataa);
				secondboatRegister({data:that.dataa}).then(res => {
					console.log(res.data)
					let result = eval('('+res.data+')');
					console.log(result[0].stat);
					if(that.dataa.id == 0){
						if(result[0].stat == 1){
							uni.showToast({title: '登记成功！'}); 
							setTimeout(() => {
								router.navigateBack();
							}, 1200);
						}else{ 
							uni.showToast({title: '登记失败！'});
							setTimeout(() => {
							return;
							}, 1200); 
						}
					}else{
						if(result[0].stat == 1){
							uni.showToast({title: '修改成功！'}); 
							setTimeout(() => {
							 router.navigateBack();
							}, 1200);
						
						}else{
							setTimeout(() => {
							 uni.showToast({title: '修改失败！'});
							}, 1200); 
							return;
						}
					}
				});
            },
            _verify() {
                let review_state = this.userInfo.review_state;
                router.redirectTo('/pages/user/verify/verify', {review_state: review_state});
            }
        }
	}
</script>

<style lang="scss">
    @import '@/style/mixin/flex.scss';
    @import '@/style/page/form.scss';
    @import '@/style/page/card.scss';
    @import '@/style/page/empty.scss';
    @import '@/style/page/foot.scss';
    @import '@/style/page/drawer.scss';

	.info{
	    padding: $uni-spacing-col-base $uni-spacing-row-base;
	    background-color: #fff;
	    text-align: center;
	    
	    &__txt{
	        font-size: 24rpx;
	        color: $uni-color-error;
	    }
	}
	
	.form{
	    align-items: inherit;
	    box-sizing: border-box;
	    padding: $uni-spacing-col-lg 0 44px;
	}
	
	.formInput{
	    margin-bottom: 0;
	}
	
	.idcard{
	    @include flex(between);
	    
	    &__cell{
	        width: 320upx;
	    }
	    
	    &__img{
	        position: relative;
	        width: 308upx;
	        height: 228upx;
	        border-radius: $uni-border-radius-sm;
	        margin-bottom: $uni-spacing-col-sm;
	        border: 1px dashed $uni-border-color;
	    }
	    
	    &__picture{
	        position: absolute;
	        top: 0;
	        left: 0;
	        display: block;
	        width: 308upx;
	        height: 228upx;
	        
	        &--left{
	            width: 228upx;
	            height: 308upx;
	            transform-origin: top left;
	            transform: rotate(90deg) translateY(-308upx);
	        }
	    }
	    
	    &__close{
	        position: absolute;
	        top: $uni-spacing-col-sm;
	        right: $uni-spacing-row-sm;
	        z-index: 999;
	    }
	    
	    &__txt{
	        text-align: center;
	        font-size: $uni-font-size-sm;
	        color: $uni-text-color-grey;
	    }
	}
	
	.link{
	    color: $color-sub;
	}
    
    .page{
        padding: 0 0 44px;
    }
    
    .form__interval{
        @include flex(null, center);
        @include flex-self(keep);
        padding-right: $uni-spacing-row-base;
    }
    
    .formInput__field--interval{
        width: 3em;
        text-align: center;
        font-size:14px;
        padding: 0 $uni-spacing-row-sm;
        color: $uni-text-color-grey;
    }
    
    .formInput__field + picker.form__icon{
        @include flex-self(keep);
    }
    
    .formInput__field + picker.form__icon uni-icons{
        border-left: 1px solid $uni-border-color;
        padding: 0 $uni-spacing-row-base 0 $uni-spacing-row-sm;
    }
    
    /* #ifdef MP */
    uni-popup .uni-mask{
        z-index: 10004;
    }
    
    uni-popup .uni-popup-fixed.uni-popup-middle{
        z-index: 10004;
        padding: 0;
        overflow: hidden;
    }
    .popup{
        background-color: #f2f2f2;
        
        &__close{
            position: absolute;
            right: 0;
            top: 0;
        }
        
        &__text{
            color: $uni-text-color;
            font-size: 16px;
            padding: $uni-spacing-col-lg 0;
            text-align: center;
        }
        
        &__input{
            padding: $uni-spacing-col-sm $uni-spacing-row-sm;
            margin: 0 $uni-spacing-row-lg $uni-spacing-col-lg;
            background-color: #fff;
            border: 1rpx solid $uni-border-color;
            border-radius: $uni-border-radius-sm;
        }
        
        &__field{
            width: 100%;
        }
        
        &__bottom{
            position: relative;
            @include flex();
            
            &::after{
                @include hr(top);
            }
        }
        
        &__btn{
            position: relative;
            width: 250rpx;
            height: 40px;
            text-align: center;
            line-height: 40px;
                
            &--confirm{
                color: $color-main;
            }
            
            &::after{
                @include hr(right);
            }
            
            &:last-child::after{
                display: none;
            }
        }
    }
    /* #endif */
	
	.common-right{
		margin-top: -20upx;
		text-align: right;
	}
	.show-button{
		font-size: 28upx;
		margin-right: 20upx;
		background-color: #0091E6;
		color: #ffffff;
	}
	.popup-view{
		display: flex;
		flex-direction: column;
		background-color: #fff;
		width: 240px;
		label{
			margin: 20upx 0;
			text-align: left;
		}
	}
</style>

